<template>
<div id="detailshopinfo">
<div class="header-shop">
<div class="shop-logo"><img :src="shop.shopLogo" alt=""></div>
<div class="shop-name">{{shop.name}}</div>
</div>
<div class="shop-middle">
<div class="shop-middle-left">
<div class="shop-sells"><span class="count">{{sellCount}}</span><div class="sell">总销量</div></div>
<div class="shop-sells"><span class="count">{{shop.cFans}}</span><div class="sell">全部宝贝</div></div>
</div>
<div class="shop-middle-right">
<div class="shopbetter"><span>{{shop.score[0].name}}</span><span>{{shop.score[0].score}}</span><span>{{Judge}}</span></div>
<div class="shopbetter"><span>{{shop.score[1].name}}</span><span>{{shop.score[1].score}}</span><span>{{Judge1}}</span></div>
<div class="shopbetter"><span>{{shop.score[2].name}}</span><span>{{shop.score[2].score}}</span><span>{{Judge2}}</span></div>
</div>
</div>
</div>  
</template>

<script>
export default {
name:"DetailShopInfo",
props: {
    shop: {
      type: Object,
      default() {
        return {};
      },
    },
  },
  computed:{
   sellCount(){
       const sell=this.shop.cSells;
       if(sell<10000){
           return sell;
       }else{
           return parseInt(sell/10000)+"万";
       }
   },
   Judge(){
       const judge=this.shop.score[0].isBetter;
       if(judge==false){
           return  "低";
       }else{
           return "高";
       }
   },
    Judge1(){
       const judge=this.shop.score[1].isBetter;
       if(judge==false){
           return  "低";
       }else{
           return "高";
       }
   },
    Judge2(){
       const judge=this.shop.score[2].isBetter;
       if(judge==false){
           return  "低";
       }else{
           return "高";
       }
   },
   }
}
</script>

<style scoped>
#detailshopinfo{
    margin-bottom: 300px;
    text-align: left;
}
.header-shop{
    display: flex;
    margin-bottom: 30px;
}
.shop-logo {
    width: 50px;
    height: 50px;
    overflow: hidden;
    border-radius: 50%;
      margin-right: 10px;
    border: 1px solid #ccc;
}
.shop-logo img{
    width: 100%;
    height: 100%;
    vertical-align: middle;
}
.shop-name{
    line-height: 50px;
}
.shop-middle-left{
    border-right: 1px solid #ccc;
}
.shop-middle-left .count{
  font-size: 18px;
}
.shop-middle-left .sell{
  font-size: 14px;
}
.shop-sells{
 float: left;
 margin: 0 20px;
}
.shopbetter{
    
}
.shop-middle-right{
    font-size: 14px;
}
</style>